<template>
    <div class="cms-honor">
        <div class="cms-honor-content">
            <div class="honor-title">荣誉资质</div>
            <hr class="honor-hr"/>

            <div class="honor-box">

                <div class="honor-item" v-for="item in honorItem">
                    <div class="item-image">
                        <img :src="item.honorImage"/>
                    </div>
                    <div class="honor-text">{{item.honorTitle}}</div>
                </div>

            </div>


        </div>
    </div>
</template>

<script>

    import honorApi from '@/api/honorApi'
    
    export default {
        name: "CmsHonor",
        data(){
            return{
                honorItem:[]
            }
        },
        created:async function(){
            let res = await honorApi.honorDetail();
            if (res.code == 200){
                this.honorItem = res.data
            }
        }
    }
</script>

<style scoped>
    .cms-honor{
        background-color: #FFFFFF;
        width: 100%;
        height: auto;
        float: left;
    }
    .cms-honor-content{
        text-align: center;
        max-width:1540px;
        width: 100%;
        /*margin: 0 auto;*/
        margin-left: 10%;
        margin-bottom: 80px;
        float: left;
        height: auto;
    }
    .honor-title{
        margin-top: 15px;
        font-size: 32px;
        margin-bottom: 10px;
        color: #ff7908;
    }
    .honor-hr{
        border-color: #ff7908;
        opacity: 0.4;
    }
    .honor-box{
        margin-top: 50px;
    }
    .honor-item{
        width: 25%;
        float: left;
        height: 235px;
        margin-top: 15px;
    }
    .item-image{
        overflow: hidden;
        width: 80%;
        height: 200px;
        margin-left: 10%;
        cursor: pointer;
    }
    .item-image > img{
        width: 100%;
        height: 200px;
        transition: all 0.6s;
    }
    .item-image > img:hover{
        transform: scale(1.3);
    }
    .honor-text{
        font-size: 18px;
        margin-top: 5px;
    }
</style>